
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="">
    <title>Iframe Bot</title>
    <!--  bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script type="text/javascript">
      if (screen.width <= 699) {
        document.location = "bot.html";
      }
      //-->
    </script>
</head>
<body>

      
<div class="container-fluid"><!-- main container -->    
    </div>
</div>

<div id="custominfo">
    <div class="container-fluid"><!-- main container -->
        <div class="row">
          <div class="col-sm-5" id="chatbot">
            <!-- CHATBOT SHOULD GO HERE -->
          </div>           
            <div id="customcontent" class="col-sm-7">             
            </div>
        </div>
    </div>
    <div class="container-fluid"><!-- main container -->
        <div class="row">
          <div class="col-sm-5" id="chatbot">
            <!-- CHATBOT SHOULD GO HERE -->
          </div>           
            <div id="custombuttons" class="col-sm-7">
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-5" id="chatbot">
      <!-- CHATBOT SHOULD GO HERE -->
    </div>  


            <div id="app"> 
                               
            <iframe  id="dynamic_iframe" src="https://wikipedia.com" width="100%" height="100%" frameborder="0" ></iframe>
            </div> 
        

</div>


<!-- babel-polyfill required for IE 11 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js" integrity="sha256-WRc/eG3R84AverJv0zmqxAmdwQxstUpqkiE+avJ3WSo=" crossorigin="anonymous"></script>
<!-- jquery used as part on this example - not required by lex-web-ui -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- bootstrap used as part of thie example - not required by lex-web-ui -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="dynamic_snippet.js"></script>

  
<!--
  Loader script tag
  Add a script tag pointing to the loader library towards the bottom
  of the html BODY section
  The library and its dependencies can be hosted on another site,
  S3 bucket or a CDN (e.g. CloudFront)
  This script creates a global variable named ChatbotUiLoader which
  provides the loader library functionality
-->
<script src="./lex-web-ui-loader.js"></script>
<!--
  After the loader script tag has been included, you can use its global
  variable to load the chatbot UI in an iframe
-->
<script>
  // The loader constructor supports various configurable options used to
  // control how the component configuration and dependencies are retrieved.
  var loaderOpts = {
    // Point the baseUrl option to the the base URL used to download
    // the chatbot UI files and dependencies.
    // In this example, the base URL is relative to the root path
    // You can also use full URLs:
    //    baseUrl: 'https://iframe-host.example.org/lex-web-ui/'
    baseUrl: '/',
    iframeSrcPath: '/bot.html#/?lexWebUiEmbed=true',
    // enable receiving chatbot UI config from event
    // the event is used as an alternative to passing the chatbot
    // UI via JSON file or via the parameter in the load() function
    shouldLoadConfigFromEvent: true
  }
  // ChatBotUiLoader contains the IframeLoader constructor
  // Instantiate the loader and pass the loader options
  var iframeLoader = new ChatBotUiLoader.IframeLoader(loaderOpts);
  // You can override the chatbot UI config by passing a parameter
  var chatbotUiconfig = {
  };
  // load the iframe
  iframeLoader.load(chatbotUiconfig)
    .then(function () {
      // at this point the API is available
      // so I can send a ping to the iframe
      // perform actions on the parent dependent on the chatbot
      // loading. For example, enable the send button once the
      // chatbot UI is loaded
      $('#send-intent').prop('disabled', false);
    })
    .catch(function (error) {
      console.error('chatbot UI failed to load', error);
    });
  // Sample function illustrating dynamic messaging with the iframe using
  // the API. This function is called from the event handler of the "Send"
  // button.
  function sendUtterance(utterance) {
    // function to determine if the iframe is minimized
    function isBotMinimized() {
      // look at the options of the loader to determine the iframe
      // element ID
      var elementId = iframeLoader.options.elementId;
      // this class is present in the iframe when minimized
      var minimizedClass = 'lex-web-ui-iframe--minimize';
      return $('#' + elementId).hasClass(minimizedClass);
    }
    return Promise.resolve()
      .then(function () {
        // use the toggleMinimizeUi API if the iframe is minimized
        return !isBotMinimized() || iframeLoader.api.toggleMinimizeUi();
      })
      .then(function () {
        return iframeLoader.api.postText(utterance);
      })
      .then(function () { console.log('message succesfully sent'); })
      .catch(function (err) { console.error('error sending message ', err); });
  }

  function openWindow(url, target) {
    window.open(url,target);
  }

</script>
<!--
  This script illustrates how to handle the various events supported by the
  chatbot UI.
-->
<pre id="sessionAttributes"></pre>
<script>

  // END COGNITO CODE CHANGES
  $(document).ready(function chatbotHandler() {


    // When the chatbot ui iframe is ready to receive the
    // dynamic config it sends the 'receivelexconfig' event to the parent
    // For example, you can send dynamic config/parameters
    // (e.g. username, geolocation) to the chatbot ui from here
    $(document).one('receivelexconfig', function onReceiveLexConfig() {
      var localTimeZone;
      try {
        localTimeZone = JSON.stringify(
          Intl.DateTimeFormat().resolvedOptions().timeZone
        );
      } catch (err) {
        localTimeZone = JSON.stringify(
          new Date().getTimezoneOffset()
        )
      }
      // sample config passing the local timezone in a sessionAttribute
      var config = {
        lex: {
          sessionAttributes: {
            localTimeZone: JSON.stringify(
              Intl.DateTimeFormat().resolvedOptions().timeZone
            )
          }
        }
      };
      // emit bot config event to send the dynamic config to the
      // chatbot UI
      // jquery can't trigger native events so use vanilla JS CustomEvent
      var event = new CustomEvent('loadlexconfig', { detail: { config: config } });
      document.dispatchEvent(event);
    });
    // Once the chatbot UI is ready, it sends a 'lexWebUiReady' event
    $(document).on('lexWebUiReady', function onUpdateLexState(evt) {
      // We are just sending a ping request here as an example
      // This example uses an event instead of calling
      // iframeLoader.api.ping() to show the asynchronous
      // event API alternative
      var event = new CustomEvent(
        'lexWebUiMessage',
        { detail: {message: {event: 'ping'} } }
      );
      document.dispatchEvent(event);
    }); 
    $(document).on('updatelexstate', function onUpdateLexState(evt){

      console.log(JSON.stringify(evt));
      var slots = {};
      var dialogState = {};
      var intentName = '';
      var sessionAttributes = {};
      var responseCard = {};
      if (evt && ('detail' in evt) && evt.detail && ('state' in evt.detail)) {
        slots = evt.detail.state.slots;
        dialogState = evt.detail.state.dialogState;
        intentName = evt.detail.state.intentName || intentName;
        sessionAttributes = evt.detail.state.sessionAttributes || sessionAttributes;
        responseCard = evt.detail.state.responseCard || responseCard;

        if (sessionAttributes.link) {
          $('#dynamic_iframe').attr('src', sessionAttributes.link);
        };


      }
    });


    // setup Send button handler

    // bot update event handler
    // In this example, the parent page is updated based on the state

  });
</script>
</body>

